<template>
	<view>
		<u-datetime-picker :show="startShow" v-model="start" mode="date" title="请选择开始时间" confirm-text="下一步"
			@cancel="input(false)" @confirm="pickStart"></u-datetime-picker>
		<u-datetime-picker :show="show1" v-model="end" mode="date" title="请选择结束时间" cancel-text="上一步"
			@cancel="input(true)" @confirm="pickEnd"></u-datetime-picker>
		<u-notify type="warning" ref="uNotify" message="结束时间应大于开始时间" ></u-notify>
	</view>
</template>

<script>
	export default {
		name: 'timeRang',
		props: {
			show: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				start: Number(new Date()),
				end: Number(new Date()),
				startShow: false,
				show1: false,
				notify: true
			}
		},
		watch: {
			show(nVal, oVal) {
				this.startShow = nVal
			},
		},
		computed: {

		},
		methods: {
			
			filterTime(time) {
			  const date = new Date(time)
			  const Y = date.getFullYear()
			  const M = date.getMonth() + 1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1 
			  const D = date.getDate()
			  return `${Y}-${M}-${D}`
			},
			input(val) {
				this.startShow = val;
				this.show1 = false;
				this.$emit('show', val)
			},
			pickStart(e) {
				this.show1 = true;
				this.startShow = false;
				this.start = e.value
			},
			pickEnd(e) {
				// this.end = e.value
				this.end = this.filterTime(e.value)
				// if (this.end < this.start) {
				// 	    this.$refs.uNotify.show({
				// 	            top: 10,
				// 	            type: 'error',
				// 	            color: '#000',
				// 	            bgColor: '#e8e8e8',
				// 	            message: 'Hi uView',
				// 	            duration: 1000 * 3,
				// 	            fontSize: 20,
				// 	            safeAreaInsetTop:true
				// 	        })
				// 	return false
				// }
				// console.log(this.filterTime(this.start), this.end)
				this.show1 = false;
				this.$emit('change', this.filterTime(this.start), this.end)
			},
		},
	}
</script>

<style>
</style>
